<template>
  <div class="main_sty">
    <div class="top">
      &nbsp;&nbsp;  | &nbsp;&nbsp;
      搜索：<el-input placeholder="单号" clearable  suffix-icon="el-icon-search" v-model="input" style="width: 160px"  @change="selectInfo"></el-input>
    </div>
    <div class="separator_sty"></div>
    <el-tabs v-model="activeName"  @tab-click="handleClick" style="padding-left: 10px">
      <el-tab-pane :label="`换货单`" name="first" >
        <div class="tab">
          <el-table
            ref="multipleTable"
            :data="exchangOrderInfo.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">

            <el-table-column
              prop="ecName"
              label="换货编号"
              width="200">
            </el-table-column>

            <el-table-column
              prop="excTheme"
              label="换货主题"
              width="240">
            </el-table-column>
            <el-table-column
              prop="excAmount"
              label="金额"
              width="120">
              <template slot-scope="scope">
                {{scope.row.excAmount | amountEvent }}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderInfoByOrderId.orderName"
              label="原订单编号"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="orderInfoByOrderId.orderTotal"
              label="原订单金额"
              width="120px"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.orderInfoByOrderId.orderTotal | amountEvent}}
              </template>
            </el-table-column>

            <el-table-column
              prop="orderInfoByOrderId.customerName"
              label="客户联系人"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>

            <el-table-column
              prop="excNewtime"
              label="创建时间"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>


            <el-table-column
              prop="operation"
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.excMainState==1">
                   <a  title="编辑">
                  <i  @click="exchangProduct(scope.row)" class="el-icon-s-unfold"></i>
                </a>
                </span>
                <span v-if="scope.row.excMainState==0">
                 <i class="el-icon-circle-check"></i>
               </span>


                <a @click="goToexchangXq(scope.row,0)" title="视图">
                  <i class="el-icon-tickets"></i>
                </a>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="page">
          <el-pagination style="float:right;margin-top: 5px;" :current-page.sync="currentPage2" :page-sizes="[10, 25, 40,100]"
                         :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                         :total="exchangOrderInfo.length"
                         @current-change="changeProSize"
                         @size-change="handleSizeChange2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`退货单`" name="second" @click="opl">
        <div class="tab">
          <el-table
            ref="multipleTable"
            :data="retouerOrderInfo.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">


            <el-table-column
              prop="retuName"
              label="退货编号"
              width="200">
            </el-table-column>


            <el-table-column
              prop="retuTheme"
              label="退货主题"
              width="200">
            </el-table-column>

            <el-table-column
              prop="orderInfoByOrderId.orderName"
              label="原订单编号"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="orderInfoByOrderId.orderTotal"
              label="原订单金额"
              width="120px"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.orderInfoByOrderId.orderTotal | amountEvent}}
              </template>
            </el-table-column>

            <el-table-column
              prop="retuYprice"
              label="退款金额"
              width="120">
              <template slot-scope="scope">
                {{scope.row.retuYprice | amountEvent}}
              </template>
            </el-table-column>


            <el-table-column
              prop="orderInfoByOrderId.customerName"
              label="订单负责人"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>

            <el-table-column
              prop="retuTata"
              label="创建时间"
              width="120px"
              show-overflow-tooltip>
            </el-table-column>

            <el-table-column
              prop="operation"
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <a  title="编辑">
                  <i class="el-icon-edit"></i>
                </a>
                <a @click="goToexchangXq(scope.row,1)" title="视图">
                  <i class="el-icon-tickets"></i>
                </a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination style="float:right;margin-top: 5px;" :current-page.sync="currentPage2" :page-sizes="[10, 25, 40,100]"
                         :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                         :total="retouerOrderInfo.length"
                         @current-change="changeProSize"
                         @size-change="handleSizeChange2">
          </el-pagination>
        </div>

      </el-tab-pane>
      <el-tab-pane  :label="`发货单`" name="third">
        <div class="tab">
          <el-table
            ref="multipleTable"
            :data="fhuodanInfo.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">

            <el-table-column
              prop="fhuoDan"
              label="发货编号"
              width="200">
            </el-table-column>

            <el-table-column
              prop="kauidGs"
              label="快递公司"
              width="200">
            </el-table-column>
            <el-table-column
              prop="kauidHao"
              label="快递单号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="customer.cusName"
              label="客户"
              width="200px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="shipmentsTime"
              label="创建时间"
              width="200px"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.shipmentsTime | formatDate}}
              </template>
            </el-table-column>

            <el-table-column
              prop=""
              label="发货单状态"
              width="120px"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.shipmentsState==1">
                  发货完成
                </span>
                <span v-if="scope.row.shipmentsState==2">
                  办理换货
                </span>
                <span v-if="scope.row.shipmentsState==3">
                  办理退货
                </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="operation"
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <a  title="编辑">
                  <i class="el-icon-edit"></i>
                </a>
                <a @click="fhuoEvent(scope.row)" title="视图">
                  <i class="el-icon-tickets"></i>
                </a>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="page">
          <el-pagination style="float:right;margin-top: 5px;" :current-page.sync="currentPage2" :page-sizes="[10, 25, 40,100]"
                         :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                         :total="fhuodanInfo.length"
                         @current-change="changeProSize"
                         @size-change="handleSizeChange2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="详情界面" name="fourth">
        <div class="tab">
          <el-table :data="tableDate" style="width:100%">
            <el-table-column prop="productId" label="产品编号"></el-table-column>
            <el-table-column prop="imgPath" label="产品图片">
              <template slot-scope="c">
                <el-image
                  class="table-td-thumb"
                  :src="c.row.imgPath"
                  :preview-src-list="[c.row.imgPath]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称"></el-table-column>
            <el-table-column prop="model" label="产品型号"></el-table-column>
            <el-table-column prop="productPrice" label="产品现价"></el-table-column>
            <el-table-column prop="excdNumber" label="维修数量"></el-table-column>
            <el-table-column prop="unit" label="产品单位"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false"
      size="50%">

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row>
              <el-col :span="24">
                <div style="border: 1px solid red ; width: 100%;height: 100px; background-color: #20a0ff"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
  import {amountToStr, formatTimeToStr} from '../assets/format'
  import TemplateVue from './homepage/TemplateVue'

  export default {
    components: {TemplateVue},
    data() {
      return {
        selctInfoFalge:1,//当前卡片界面标记
        currentPage2:0,
        pageSize2:10,
        currentPage1:1,//当前页
        pageSizes1:[4, 8, 12],//可选择的页大小
        totalSize1:0,//总页数
        exchangOrderInfo:[],//换货单
        retouerOrderInfo:[],//退货单
        fhuodanInfo:[],//发货单
        activeName: 'first',//卡片名称
        tableDate: [],    //产品信息列表
        exchangeState:false,
        /////////////////////////////////////////////////////////
        category:'',//类型查询
        data2: [],//产品分类数组
        searchPro:'',//添加商品里面的查询
        pcId:0,//类型id
        pbId:0,//品牌id
        ///////////////
        drawer:false,
        direction:'rtl',
        value:'',//汽车品牌搜索
        options:[],//汽车品牌
        productList:[],//产品信息
        input:'',//汽车型号搜索
        colData: [{title: "名称",istrue: true},//动态列
          {title: "型号",istrue: true},],
        colOptions: [], //默认全选
        colSelect: [],


        //分页
        totalSize:0,
        pageSize:0,
        currentPage:1,
        sizes:[10, 15, 20],//分页可改变的页数
      };
    },
    created :function() {
      this.retouerOrderEvent(this.input);
      this.exchangOrderEvent(this.input);
      this.fhuodanEvent(this.input);
      //加载产品分类
      this.$axios.get("http://localhost:8088/buInfo/category")
        .then(v=>{
          this.data2=v.data;
        }).catch();

    },
    methods: {
      exchangProduct(scope) {
        this.$confirm('此操作将会生成新的订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tpl=scope.orderInfoByOrderId.orderId;
          this.$axios.get("http://localhost:8088/t_pl",{params:{excId:scope.excId,orderId:tpl,
              deliverId:scope.excDeliveryid,exchangName:scope.excTheme,ecName:scope.ecName}}).then().catch()
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消新增'
          });
        });
      },
      //前端分页
      changeProSize: function (size) {
        this.currentPage2 = size;
        console.log("yy"+this.pageSize)  //每页下拉显示数据
      },
      handleSizeChange2: function(currentPage){
        this.pageSize2 = currentPage;
        console.log("kk"+this.pageNum)  //点击第几页
      },

     /* exchangProduct(scope){
        let tpl=scope.orderInfoByOrderId.orderId;
        this.$axios.get("http://localhost:8088/t_pl",{params:{excId:scope.excId,orderId:tpl,
            deliverId:scope.excDeliveryid,exchangName:scope.excTheme,ecName:scope.ecName}}).then().catch()
      },*/
      //发货单详情
      fhuoEvent(row){
        this.tableDate=[];
        this.exchangeState=false;
        this.$axios.get("http://localhost:8088/zhao_mainProduct",{params:{deliverId:row.sdeliveryId}}).then(v=>{
          this.tableDate=v.data;
        }).catch();
        this.activeName="fourth";
      },
      //退换货详情
      goToexchangXq(row,valueInfo){
        let type=null;
        let tainNote=null;
        if(valueInfo==0){
          type="换货";
          tainNote=row.ecName;
          this.exchangeState=true;
        }
        if(valueInfo==1){
           type="退货";
          tainNote=row.retuName;
          this.exchangeState=false;
        }
        this.print("tyle信息"+type);
        this.print("tainNote信息"+tainNote);
        this.tableDate=[];
        if(type != '' && type != undefined && tainNote != '' && tainNote != undefined){
          this.$axios.get("http://localhost:8088/crm/product-id",
            {params:{tainType:type, tainNote:tainNote}}
          ).then(v=>{
            this.tableDate = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
        this.activeName="fourth";
      },
      goToretouerXq(row){

      },
      fhuodanEvent(searchInfo){
        this.$axios.get("http://localhost:8088/zhao_ZfhuodanEntity",{params:{selctInfo:searchInfo}}).then(v=>{
          this.fhuodanInfo=v.data;
        }).catch()
      },

      exchangOrderEvent(searchInfo){
        this.$axios.get("http://localhost:8088/zhao_weo",{params:{searchInfo:searchInfo}}).then(v=>{
          this.exchangOrderInfo=v.data;
        }).catch()
      },

      retouerOrderEvent(searchInfo){
        this.$axios.get("http://localhost:8088/zhao_saretouer",{params:{searchInfo:searchInfo}}).then(v=>{
          this.retouerOrderInfo=v.data;
        }).catch()
      },
      handleClick(tab, event) {
        this.input='';
        let tabName=tab.name;
        if(tabName=='first'){
          this.selctInfoFalge=1;
        }
        if(tabName=='second'){
          this.selctInfoFalge=2;
        }
        if(tabName=='third'){
          this.selctInfoFalge=3;
        }
        this.currentPage2=1;
        this.pageSize2=10;
        console.log(tab, event);
      },
      selectInfo(){
        if(this.input!=null){
          if(this.selctInfoFalge==1){
            this.exchangOrderEvent(this.input);
          }
          if(this.selctInfoFalge==2){
            this.retouerOrderEvent(this.input);
          }
          if(this.selctInfoFalge==3){
            this.fhuodanEvent(this.input);
          }
        }
      },

      ///////////////////////////////////////////////
      //类型加品牌查询 和模糊查询
      handleChange(item) {
        if(this.category !='' ){
          this.pbId=item[0];
          this.pcId=item[1];

        }else{
          this.pbId=0;
          this.pcId=0;
        }
        this.initProduct(this.searchPro,this.pcId,this.pbId);

      },
      //产品列表
      initProduct(searchPro,pcId,pbId){
        this.$axios.get("http://localhost:8088/buInfo/newproduct_info",{
          params:{
            productName:searchPro,
            pcId:pcId,
            pbId:pbId
          }
        }).then(v=>{
          this.productList=v.data;
        }).catch();
      },


      /////6_8久代码
      opl(){
        this.$message("okok")
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      changePage(){},
      handleSizeChange(){},
      goBack(){
        this.$router.go(-1);
      },
    },

    watch: {
     /* colOptions(valArr) {
        var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
        this.colData.filter(i => {
          if (arr.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          }
        });
      }*/
    },
    filters: {
      formatDate: function (time) {
        if (time != null && time != "") {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
        } else {
          return "";
        }
      },
      amountEvent:function(val){
        return amountToStr(val);
      },
    }
    }

</script>


<style scoped>
  .tab{

    width: 100%;
    max-height: 370px;
    overflow-y: auto;
  }
  .grid-content {
    border-radius: 4px;
    height: 700px;
  }
  .bg-purple {
    background: #F4F8FB;
  }
  .main_sty{
    border:1px solid #ccc;
    width:100%;
    height: 535px;
    background: white;
    border-radius: 5px;
    box-shadow:#ccc 0px 0px 10px;
    overflow:hidden;
  }
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  .page{
    float: right;
    padding: 15px 0 20px 0;
  }
  .separator_sty{
    border:1px solid #409eff;
    margin: 0 auto;
  }
  .top{
    padding-left: 10px;
    margin: 3px;
    padding:5px;
  }
</style>
